<template>
    <div>
        <Form ref="formInline" :model="formData" :rules="rules" :label-width="80">
            <Row>
                <Col span="8">
                    <FormItem label="名称" prop="name">
                        <Input type="text" v-model="formData.name" placeholder="名称"/>
                    </FormItem>
                </Col>
                <Col span="8">
                    <FormItem label="描述">
                        <Input type="text" v-model="formData.description" placeholder="描述"/>
                    </FormItem>
                </Col>
                <Col span="5">
                    <FormItem label="状态">
                        <RadioGroup v-model="formData.status">
                            <Radio :value="'1'" :label="'1'">
                                <Icon type="md-checkmark-circle"/>
                                启用
                            </Radio>
                            <Radio :value="'0'" :label="'0'">
                                <Icon type="md-close-circle"/>
                                禁用
                            </Radio>
                        </RadioGroup>
                    </FormItem>
                </Col>
                <Col span="3" style="text-align: right">
                    <Button type="primary" @click="submit">保存</Button>
                </Col>
            </Row>
        </Form>
        <!-- http://kcz66.gitee.io/k-form-design/#/zh-cn/components/design -->
        <k-form-design title="业务表单设计器" ref='kfd' :toolbars="[]" @save="handleSave"/>
    </div>
</template>

<script>
    import {save, update} from '@/api/form';

    export default {
        name: "editform",
        data() {
            return {
                formData: {
                    status: '1'
                },
                jsonData: {},
                rules: {
                    name: [
                        {required: true, message: '请输入名称', trigger: 'blur'}
                    ]
                }
            }
        },
        created() {
            this.formData = this.$route.query
            if(JSON.stringify(this.formData) != "{}"){
                this.jsonData = JSON.parse(this.$route.query.text)
                this.$nextTick(() => {
                    this.$refs.kfd.handleSetData(this.jsonData)
                })
            }
        },
        methods: {
            handleSave(e) {
                console.log(e);
            },
            async submit() {
                this.$refs['formInline'].validate(async valid => {
                    if (valid) {
                        this.formData.text = JSON.stringify(this.$refs.kfd.getValue());
                        let res = {};
                        if(this.formData.id){
                            res = await update(this.formData);
                        }else {
                            res = await save(this.formData);
                        }
                        if (res.success) {
                            this.$layer.msg(res.message, {icon: 1, time: 3});
                            this.$router.push({path: "/designForm"})
                        }
                    }
                });
            }
        }
    }
</script>

<style scoped>

</style>
